import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Helper from '../../../components/Helper';
import { Link } from 'react-router-dom';
import s from './RiskAsset.module.css';
import Icon from '../icon';
import Tooltip from '@kuiper-components/tooltip';

function element(key, val) {
	const feature = JSON.parse(sessionStorage.resD).feature;

	const obj = {
		asset: { text: '资产变动数', url: '/asset/asset/overview' },
		securityEvent: {
			text: '安全事件数',
			url: '/securityEvent/securityEvent/overview',
		},
		ssl: { text: 'SSL安全威胁数', url: '/weakness/ssl/overview' },
		vul: { text: 'Web漏洞数', url: '/weakness/vul/overview' },
		content: { text: '内容威胁数', url: '/content/content/overview' },
	};
	const keyArr = [];
	// 根据套餐展示"待处理结果"
	Object.entries(feature).forEach(([key_, bool]) => {
		if (key_.includes(key) && bool) {
			keyArr.push(key_);
		}
	});
	if (!keyArr.length) {
		return (
			<Tooltip overlay={`当前套餐不支持该监测项，请先升级套餐`} placement="top">
				<div className={s.block}>
					<div className={s.line} style={{ background: '#999EA8' }}></div>
					<div className={s.text}>
						<span>{obj[key].text}</span>
						<span style={{ color: '#999EA8' }}>0</span>
					</div>
					<div className={s.example}>
						<Icon active="example" />
					</div>
				</div>
			</Tooltip>
		);
	} else {
		return (
			<Link to={obj[key].url}>
				<div className={s.block}>
					<div
						className={s.line}
						style={{ background: val > 0 ? '#F04038' : '#11AB4E' }}
					></div>
					<div className={s.text}>
						<span>{obj[key].text}</span>
						<span style={{ color: val > 0 ? '#F04038' : '#000' }}>
							{val || 0}
						</span>
					</div>
				</div>
			</Link>
		);
	}
}
export default function RiskAsset({ className, pendingTask }) {
	const pendingTaskKey = [
		'vul',
		'ssl',
		'securityEvent',
		'asset',
		'content',
		// 'host',
	];
	return (
		<div className={cn(className, s.riskAsset)}>
			<div className={s.title}>
				待处理结果
				<Helper
					placement="top"
					overlay="资产各监测项最新监测结果待处理数量统计"
				/>
			</div>
			<div className={s.taskBox}>
				{pendingTaskKey.map(e => {
					return element(e, pendingTask[e]);
				})}
			</div>
		</div>
	);
}

RiskAsset.propTypes = {
	className: PropTypes.string,
	pendingTask: PropTypes.any,
};

RiskAsset.defaultProps = {
	className: s.RiskAsset,
};
